<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box2{width:100px;height:100px;background: red;position: absolute;left:0;top:110px;}
    </style>
</head>
<body>
    <input type="button" id="btn1" value="隐藏">
    <input type="button" id="btn2" value="显示">
    <input type="button" id="btn3" value="隐藏/显示">
    <input type="button" id="btn4" value="上拉">
    <input type="button" id="btn5" value="下拉">
    <input type="button" id="btn6" value="上拉/下拉">
    <input type="button" id="btn7" value="淡出">
    <input type="button" id="btn8" value="淡入">
    <input type="button" id="btn9" value="淡出/淡入">
    <input type="button" id="btn10" value="半透明">
    <div class="box2">hello</div>
</body>
<script src="../jquery.js"></script>
<script>
    
    // 内置动画

    $("#btn1").click(function(){
        $(".box2").hide(1000);
    })
    $("#btn2").click(function(){
        $(".box2").show(1000, function(){
            $(".box2").css({background:"yellow"})
        });
    })
    $("#btn3").click(function(){
        $(".box2").toggle(1000);
    })


    $("#btn4").click(function(){
        $(".box2").slideUp(2000);
    })
    $("#btn5").click(function(){
        $(".box2").slideDown();
    })
    $("#btn6").click(function(){
        $(".box2").slideToggle();
    })


    $("#btn7").click(function(){
        $(".box2").fadeOut(2000);
    })
    $("#btn8").click(function(){
        $(".box2").fadeIn();
    })
    $("#btn9").click(function(){
        $(".box2").fadeToggle();
    })


    $("#btn10").click(function(){
        $(".box2").fadeTo(1000, 0.5);
    })





</script>
</html>